<template>
	<view class="content">
		<searchBar></searchBar>
		<view class="bannar">
			<swiper class="swiper" :autoplay="true">
				<swiper-item v-for="item in bList">
					<navigator class="swiper-item uni-bg-red" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">
						<img style="width:100%;height:300rpx" :src="item.image_src" alt="" />
					</navigator>
				</swiper-item>

			</swiper>
		</view>
		<view class="navCon">
			<navigator v-for="item in nList" :open-type="item.name == '分类' ? 'switchTab' : 'navigate'" :url="item.name == '分类' ? '/pages/cate/cate' : '/subpkg/goods_list/goods_list?query=' + item.name">
				<!-- #ifdef MP -->
				<image mode="widthFix" style="width:100%;"  :src="item.image_src" alt=""></image>
				<!-- #endif -->
				<!-- #ifndef MP -->
				<img mode="widthFix" style="width:100%;"  :src="item.image_src" alt="">
				<!-- #endif -->
			</navigator>
		</view>
		<!-- <view class="">
			<uni-calendar 
				:insert="true"
				:lunar="true" 
				:start-date="'2019-3-2'"
				:end-date="'2019-5-20'"
				@change="change"
				 />
		</view> -->
		<!-- 楼层图片区域 -->
		<view class="floor-list">
		  <!-- 楼层 item 项 -->
		  <view class="floor-item" v-for="(item, i) in floorList" :key="i">
		    <!-- 楼层标题 -->
		    <image :src="item.floor_title.image_src" class="floor-title"></image>
			<view class="floor-img-box">
				  <!-- 左侧大图片的盒子 -->
				  <navigator class="left-img-box" :url="item.product_list[0].url">
				    <image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}" mode="widthFix"></image>
				  </navigator>
				  <!-- 右侧 4 个小图片的盒子 -->
				  <view class="right-img-box">
					  <template v-for="(item2, i2) in item.product_list" :key="i2">
					  	<navigator class="right-img-item"  v-if="i2 != 0" :url="item2.url">
					  	    <image :src="item2.image_src" mode="widthFix" :style="{width: item2.image_width + 'rpx'}"></image>
					  	  </navigator>
					  </template>
				  </view>
				</view>
			
		  </view>
		</view>
	</view>
</template>
<script setup>
	import searchBar from '../../components/searchBar/searchBar.vue'
</script>
<script>
	export default {
		data() {
			return {
				bList: [],
				nList:[],
				floorList: []
			}
		},
		created() {
			this.loadSwiper1();
			this.loadNavList();
			this.getFloorList();
		},
		onLoad() {},
		methods: {
			loadSwiper(){
				uni.request({
					url: 'https://www.uinav.com/api/public/v1/home/swiperdata',
					success: (res) => {
						console.log(res.data);
						this.bList = res.data.message;
					}
				});
			},
			loadSwiper1(){
				
				uni.$http.get('/api/public/v1/home/swiperdata').then(res=>{
					
					console.log(res,111)
					this.bList = res.data.message;
					
				})
			},
			loadNavList(){
				uni.$http.get('/api/public/v1/home/catitems').then(res=>{
					
					console.log(res,111)
					this.nList = res.data.message;
					
				})
			},
			// 获取楼层列表数据
			async getFloorList() {
			  const { data: res } = await uni.$http.get('/api/public/v1/home/floordata')
			
			
			  // 通过双层 forEach 循环，处理 URL 地址
			  res.message.forEach(floor => {
			    floor.product_list.forEach(prod => {
			      prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1]
			    })
			  })
			
			  this.floorList = res.message;
			  console.log(134)
			}
		}
	}
</script>

<style>
	.content {}

	
	.navCon{
		display: flex;
	}
	.navCon navigator{
		flex:1
	}
	/* #ifndef MP */
	.navCon a{
		flex:1
	}
	/* #endif */
	.floor-title {
	  height: 60rpx;
	  width: 100%;
	  display: flex;
	  margin-top: 20px;
		}
	.right-img-box {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: space-around;
	}
	
	.floor-img-box {
	  display: flex;
	  padding-left: 10rpx;
	}

</style>
